import React, { useState, useEffect } from 'react'
import { Link, history } from 'umi'
import { PageContainer } from '@ant-design/pro-layout'
import { Input, Card, notification, TreeSelect } from 'antd'
import { create } from '@/services/freight/api'
import { all } from '@/services/area/api'

import ProForm, {
  ProFormRadio,
  ProFormList,
  ProFormText,
  ProFormFieldSet,
  ProFormDigit,
  ProFormGroup,
} from '@ant-design/pro-form'

const Category = () => {

  const header = {
    title: '添加模版',
    breadcrumb: {
      itemRender: (route, params, routes, paths) => {
        return <Link to={route.path}>{route.breadcrumbName}</Link>
      },
      routes: [
        {
          path: '',
          breadcrumbName: '商品',
        },
        {
          path: '/product/freight',
          breadcrumbName: '运费模版',
        },
        {
          path: '',
          breadcrumbName: '当前页面',
        },
      ],
    },
  }

  const { SHOW_PARENT } = TreeSelect

  const [position, setPosition] = useState('bottom')
  const [myData, setMyData] = useState([])

  useEffect(() => {
    all({
      page: 1,
      pageSize: 10,
    }).then(data => {
      setMyData(data)
    })
  }, [])
  return (
    <PageContainer header={header}>
      <Card>
        <ProForm
          onFinish={async values => {
            console.log('Received values of form:', values)
            const items = values.freight_items;
            for (let j = 0; j < items.length; j++) {
              items[j].area_codes = items[j].area_codes[0]
            }

            create(values).then(data => {
              console.log(data)
              notification['success']({
                message: '添加成功',
                // description:
                //   'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
              })
              history.push('/product/freight')
            })
          }}
        >
          <ProFormText
            width='sm'
            name='name'
            label='模版名称'
            rules={[{ required: true, message: '模版名称为必填项!' }]}
          />
          <ProFormRadio.Group
            label='计费方式'
            rules={[{ required: true, message: '计费方式为必填项!' }]}
            name='charge_type'
            options={[
              {
                label: '按件数',
                value: '0',
              },
              {
                label: '按重量',
                value: '1',
              },
            ]}
          />
          <ProFormList
            name='freight_items'
            label='运费规则'
            rules={[
              {
                validator: async (_, value) => {
                  console.log(value)
                  if (value && value.length > 0) {
                    return
                  }
                  throw new Error('至少要有一项！')
                },
              },
            ]}
            creatorButtonProps={{
              position,
            }}
            creatorRecord={{
              first_piece: 1,
                first_fee: 1,
                continuous_piece: 1,
                continuous_fee: 1,
                area_codes: [],
            }}
            initialValue={[
              {
                first_piece: 1,
                first_fee: 1,
                continuous_piece: 1,
                continuous_fee: 1,
                area_codes: [],
              },
            ]}
          >
            <ProFormGroup>
              <ProFormFieldSet
                type='group'
                name='area_codes'
                label='地区'
                rules={[{ required: true, message: '地区为必填项!' }]}
              >
                <TreeSelect
                  maxTagCount={3}
                  style={{ width: 300 }}
                  treeData={myData}
                  showCheckedStrategy={SHOW_PARENT}
                  treeCheckable={true}
                />
              </ProFormFieldSet>
              <ProFormDigit width='xs' label='首件' name='first_piece' min={1} max={10} />
              <ProFormDigit width='xs' label='运费' name='first_fee' min={1} max={10} />
              <ProFormDigit width='xs' label='续件' name='continuous_piece' min={1} max={10} />
              <ProFormDigit width='xs' label='续费' name='continuous_fee' min={1} max={10} />
            </ProFormGroup>
          </ProFormList>
        </ProForm>
      </Card>
    </PageContainer>
  )
}

export default Category
